var ul = $('#test-div')
    //使用li节点



var li = ('<li><span>winfrom</span></li>')
ul.append(li)
    // 创建DOM对象:
var ull = document.getElementById('test-div')

var ll = document.createElement('li')
ll.innerHTML = '<span>Pascal</span>'

ul.append(ll)


//使用append()添加
ul.append('<li><span>我是html</span></li>')



//

// 添加函数对象:
ul.append(function(index, html) {
    return '<li><span>我是sql</span></li>' + index
})



//删除节点
var li = $('#test-div>ul>li');
li.remove(); // 所有<li>全被删除


/*
练习
除了列出的3种语言外，请再添加Pascal、Lua和Ruby，然后按字母顺序排序节点：

<!-- HTML结构 -->
<div id="test-div">
    <ul>
        <li><span>JavaScript</span></li>
        <li><span>Python</span></li>
        <li><span>Swift</span></li>
    </ul>
</div>
'use strict';


// 测试:
;(function () {
    var s = $('#test-div>ul>li').map(function () {
        return $(this).text();
    }).get().join(',');
    if (s === 'JavaScript,Lua,Pascal,Python,Ruby,Swift') {
        console.log('测试通过!');
    } else {
        console.log('测试失败: ' + s);
    }
})();
 
JavaScript
Python
Swift
*/

// $('#testdiv ul').find('li').remove()
// var x = ['JavaScript', 'Lua', 'Pascal', 'Python', 'Ruby', 'Swift'].sort()
// for (let i = 0; i < x.length; i++) {
//     $('#testdiv ul').append('<li><span>' + x[i] + '</span></li>')
// }

/*
var tes = $('#testdiv ul')
var li = tes.find('li')
var arr = ['Pascal', 'Lua', 'Ruby'];
li.map(function() {
    arr.push($(this).text())
})
console.log(arr);
li.remove();
arr.sort().forEach(function(x) {
    tes.append('<li><span>' + x + '</span></li>')
})

// 测试:
;
(function() {
    var s = $('#test-div>ul>li').map(function() {
        return $(this).text();
    }).get().join(',');
    if (s === 'JavaScript,Lua,Pascal,Python,Ruby,Swift') {
        console.log('测试通过!');
    } else {
        console.log('测试失败: ' + s);
    }
})();
*/

var fc = $('#fuck')
fc.click(function() {
    alert('Hello!');
});
fc.on('click', function() {
    console.log('你好啊陌生人');
});


// 两者完全等价。我们通常用后面的写法。

// jQuery能够绑定的事件主要包括：

/*
鼠标事件
click: 鼠标单击时触发；
dblclick：鼠标双击时触发；
mouseenter：鼠标进入时触发；
mouseleave：鼠标移出时触发；
mousemove：鼠标在DOM内部移动时触发；
hover：鼠标进入和退出时触发两个函数，相当于mouseenter加上mouseleave。
键盘事件
键盘事件仅作用在当前焦点的DOM上，通常是<input>和<textarea>。

keydown：键盘按下时触发；
keyup：键盘松开时触发；
keypress：按一次键后触发。 其他事件
focus：当DOM获得焦点时触发；
blur：当DOM失去焦点时触发；
change：当<input>、<select>或<textarea>的内容改变时触发；
submit：当<form>提交时触发；
ready：当页面被载入并且DOM树完成初始化后触发。 其中，ready仅作用于document对象。由于ready事件在DOM完成初始化后触发，且只触发一次，所以非常适合用来写其他的初始化代码。假设我们想给一个<form>表单绑定submit事件，下面的代码没有预期的效果：


//ready
$(function() {
    console.log('domd打印成功');
})

// 取消绑定
// 一个已被绑定的事件可以解除绑定，通过off('click', function)实现：

function hello() {
    alert('hello!');
}

a.click(hello); // 绑定事件

// 10秒钟后解除绑定:
setTimeout(function() {
    a.off('click', hello);
}, 10000);
*/